<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>注册</title>
    <link href="${pageContext.request.contextPath }/csslib/login.css" rel="stylesheet">
</head>
<body>
  <jsp:include page="/front/common/navbar.jsp"></jsp:include>
  <div class="header">
      <div class="header-top clearfix">
         <div class="header-left">
             <div class="logo"><a href="${pageContext.request.contextPath }/front/index.jsp"><img src="${pageContext.request.contextPath }/images/logo.jpg"></a></div>
             <div class="header-site">
                 <h2>账号注册</h2>
             </div>
         </div>
       </div>
  </div>
 <div class="login-wrap">
      <div class="login-box">
          <div class="lb-left">
              <form method="post"  id="register-form">
              <div class="form">
                  <p class="lf-top"><span class="error-tip"></span></p>
                  <dl>
                      <dt>用户名：</dt>
                      <dd>
                       <input type="text" class="login-text" name="code" />
                       <span class="input-tip">4~16个字符，英文与数字</span>
                       <span class="error-tip"></span>
                       </dd>
                  </dl>
                  <dl>
                      <dt>密码：</dt>
                      <dd>
                       <input type="password" class="login-text" name="password" />
                       <span class="input-tip">4~16个字符，英文与数字</span>
                       <span class="error-tip"></span>
                      </dd>
                  </dl>
                  <dl>
                      <dt>确认密码：</dt>
                      <dd>
                      <input type="password" class="login-text" name="confirm" />
                      <span class="error-tip"></span> 
                      </dd>
                  </dl>
                  <dl>
                      <dt>昵称：</dt>
                      <dd>
                      <input type="text" class="login-text" name="nickname" />
                      <span class="input-tip">4~16个字符</span>
                      <span class="error-tip"></span>
                      </dd>
                  </dl>
                  <dl>
                      <dt>验证码：</dt>
                      <dd class="checkCode">
                          <input type="text" name="randomCode" class="login-text yzm-text" />
                          <img id="code-img" src="${pageContext.request.contextPath }/yyj/valid.action">
                          看不清楚？<a href="javascript:;" id="changeCode" class="color-blue">换一张</a>
                      </dd>
                  </dl>
                  <dl class="form-bt">

                      <dd>
                          <label><input type="checkbox" class="input-middle" id="require-read" />&nbsp;我已阅读并接受</label><a href="#" class="color-blue">《一优劵网服务协议》</a>
                      </dd>
                  </dl>
                  <dl class="form-bt">
                      <dd>
                          <input type="button" id="register-button" class="login-button" value="注册">
                      </dd>
                  </dl>
              </div>
              </form>
          </div>
          <div class="lb-right">
              <div class="login-side">
                  <h3>使用合作账号登录</h3>
                  <div class="ls-all">
                      <a href="#" class="sina">新浪微博账号登录</a>
                      <a href="#" class="qq">QQ账号登录</a>
                      <a href="#" class="taobao">淘宝网账号登录</a>
                  </div>
                  <p>已有账号，立即登录</p>
                  <p class="ls-login"><a href="#">登录</a></p>
              </div>
          </div>
      </div>
  </div>
  <jsp:include page="/front/common/footer.jsp"></jsp:include>
  <script src="${pageContext.request.contextPath }/jslib/jquery-1.8.3.min.js"></script>
  <script  src="${pageContext.request.contextPath }/jslib/common.js"></script>
  <script>
     $("#changeCode").click(function(){
    	 $("#code-img")[0].src = "${pageContext.request.contextPath }/yyj/valid.action?"+Math.random();
     });
     $("#register-button").click(function(){
    	 //验证表单
    	 if(!validate()){
    		 return;
    	 }
    	 
    	 //ajax登录
    	var actionURL = "consumer.action?command=register";
 		var params = $("#register-form").serialize();
 			
 		jQuery.ajax({
 			url: actionURL,
 			type: "post",
 			cache: false,
 			data: params,
 			success: function(result){
 				if("-1" === result){
 					$(".lf-top span").text("验证码错误");
 				}else if("-2" === result){
 					$(".lf-top span").text("用户名已存在");
 				}else{
 					alert("注册成功");
 					//跳转页面
 				}
 			}
 		});
    	 
    	 
     });
     $(".form .login-text").focus(function(){
    	 
    	 var $dd = $(this).closest("dd");
    	 $dd.find(".input-tip").show();
    	 $dd.find(".error-tip").hide();
     });
     function validate(){
    	 var code = $.trim($("input[name='code']").val());
    	 var password = $.trim($("input[name='password']").val());
    	 var confirm = $.trim($("input[name='confirm']").val());
    	 var nickname = $.trim($("input[name='nickname']").val());
    	 var randomCode = $.trim($("input[name='randomCode']").val());
    	 //isAlphanumeric
    	 if(code === ""){
    		 var $dd = $("input[name='code']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("请输入用户名");
    		 return false;
    	 }
    	 if(code.length < 4 || code.length > 16 || !isAlphanumeric(code)){
    		 var $dd = $("input[name='code']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("用户名必须4~16个字符，英文与数字");
    		 return false;
    		
    	 }
    	 if(password === ""){
    		 var $dd = $("input[name='password']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("请输入密码");
    		 return false;
    	 }
    	 if(password.length < 4 || password.length > 16 || !isAlphanumeric(code)){
    		 var $dd = $("input[name='password']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("密码必须4~16个字符，英文与数字");
    		 return false;
    		
    	 }
    	 if(confirm !== password){
    		 var $dd = $("input[name='confirm']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("两次密码必须一致");
    		 return false;
    		 
    	 }
    	 if(nickname === ""){
    		 
    		 var $dd = $("input[name='nickname']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("请输入昵称");
    		 return false;
    		
    	 }
    	 if(nickname.length < 4 || nickname.length > 16 ){
    		 var $dd = $("input[name='nickname']").closest("dd");
        	 $dd.find(".input-tip").hide();
        	 $dd.find(".error-tip").show().text("昵称必须4~16个字符");
    		 return false;
    		
    	 }
    	 if(randomCode === ""){
    		$("input[name='randomCode']").closest("dd").append("<p class='error-tip'>验证码不能为空<p>");
    		 return false;
    	 }
    	 
    	 if(!$("#require-read").attr("checked") == true){
    		
    		 $("#require-read").closest("dd").append("<p class='error-tip'>请阅读《一优劵网服务协议》</p>");
    		 return false;
    	 }
    	 return true;

     }
  </script>
</body>
</html>